import { defineStore } from 'pinia'
import { type GlobalThemeOverrides, darkTheme } from 'naive-ui'
import { addColorAlpha, getColorPalette } from '@/utils'

type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error'
type ColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active'
type ColorKey = `${ColorType}Color${ColorScene}`
type ThemeColor = Partial<Record<ColorKey, string>>

interface ColorAction {
  scene: ColorScene
  handler: (color: string) => string
}

// 获取naive的主题颜色
function getNaiveThemeOverrides(colors: Record<ColorType, string>): GlobalThemeOverrides {
  const { primary, success, warning, error } = colors
  const info = colors.info

  const themeColors = getThemeColors([
    ['primary', primary],
    ['info', info],
    ['success', success],
    ['warning', warning],
    ['error', error],
  ])

  const colorLoading = primary

  return {
    common: {
      ...themeColors,
    },
    LoadingBar: {
      colorLoading,
    },
  }
}

// 获取主题颜色的各种场景对应的颜色
function getThemeColors(colors: [ColorType, string][]) {
  const colorActions: ColorAction[] = [
    { scene: '', handler: (color) => color },
    { scene: 'Suppl', handler: (color) => color },
    { scene: 'Hover', handler: (color) => getColorPalette(color, 5) },
    { scene: 'Pressed', handler: (color) => getColorPalette(color, 7) },
    { scene: 'Active', handler: (color) => addColorAlpha(color, 0.1) },
  ]

  const themeColor: ThemeColor = {}

  colors.forEach((color) => {
    colorActions.forEach((action) => {
      const [colorType, colorValue] = color
      const colorKey: ColorKey = `${colorType}Color${action.scene}`
      themeColor[colorKey] = action.handler(colorValue)
    })
  })

  return themeColor
}

export const useThemeStore = defineStore('theme-store', {
  state: () => {
    return {
      darkMode: false,
      followSystemTheme: false,
      isCustomizeDarkModeTransition: true,
      layout: {
        minWidth: 900,
        mode: 'vertical',
      },
      scrollMode: 'content',
      themeColor: '#536dfe',
      otherColor: {
        info: '#2080f0',
        success: '#52c41a',
        warning: '#faad14',
        error: '#f5222d',
      },
      sider: {
        collapsedWidth: 64,
      },
      header: {
        inverted: false,
      },
      page: {
        animate: '',
        animateMode: '',
      },
    }
  },

  getters: {
    /** naive-ui暗黑主题 */
    naiveTheme(state) {
      return state.darkMode ? darkTheme : undefined
    },
    /** naiveUI的主题配置 */
    naiveThemeOverrides(state) {
      const overrides = getNaiveThemeOverrides({ primary: state.themeColor, ...state.otherColor })
      return overrides
    },
    /** 页面动画模式 */
    pageAnimateMode(state) {
      return state.page.animate ? state.page.animateMode : undefined
    },
  },
  actions: {
    /** 设置暗黑模式 */
    setDarkMode(darkMode: boolean) {
      this.darkMode = darkMode
    },
    /** 设置自动跟随系统主题 */
    setFollowSystemTheme(visible: boolean) {
      this.followSystemTheme = visible
    },
    /** 设置自动跟随系统主题 */
    setIsCustomizeDarkModeTransition(isCustomize: boolean) {
      this.isCustomizeDarkModeTransition = isCustomize
    },
    /** 自动跟随系统主题 */
    setAutoFollowSystemMode(darkMode: boolean) {
      if (this.followSystemTheme) {
        this.darkMode = darkMode
      }
    },
    /** 切换/关闭 暗黑模式 */
    toggleDarkMode() {
      this.darkMode = !this.darkMode
    },
  },
})
